<template id="personal">
  <div class="swiper">
    <!-- 链接 -->
    <!-- <div class="link-frist">
      <div class="link-frist-div">
        <div class="link">
          <el-link type="info" class="info">个人中心</el-link>
        </div>
      </div>
    </div> -->

    <!-- 用户信息 -->
    <div class="user-info" v-show="isModUserInfo">
      <div class="userAvatar">
        <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar" />
      </div>
      <div class="userInfo-show" style="width: 190px">
        <span>昵称：{{ ruleForm.name }}</span>
        <span>年龄：{{ ruleForm.age }}</span>
        <span>性别：{{ ruleForm.gender === 1 ? "男" : "女" }}</span>
      </div>
      <div class="userInfo-show">
        <span>学历：{{ ruleForm.education }}</span>
        <span>院校：{{ ruleForm.school }}</span>
        <span>专业：{{ ruleForm.major }}</span>
      </div>
      <div class="userInfo-show">
        <span>在读状态：{{
          ruleForm.studyStatus === 0
            ? "在校生"
            : ruleForm.studyStatus === 1
              ? "应届毕业生"
              : "已毕业"
        }}
          <!-- <span v-if="ruleForm.studyStatus === 0">在校生</span>
          <span v-if="ruleForm.studyStatus === 1"> 应届毕业生</span>
          <span v-if="ruleForm.studyStatus === 2"> 已毕业</span> -->
        </span>
        <span>联系电话：{{ ruleForm.phone }}</span>
        <span>邮箱：{{ ruleForm.email }}</span>
      </div>
      <el-button style="
          padding: 20px;
          margin-left: 20px;
          background-color: var(--button-color);
          color: var(--title-color);
        " type="primary" plain @click="modInfo">编辑资料</el-button>
    </div>
    <div class="user-info" v-show="!isModUserInfo">
      <div class="userAvatar">
        <el-upload class="avatar-uploader" action="http://81.71.154.186:8088/api/avatars/uploadAvatar"
          :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </div>
      <div class="userInfo">
        <span>昵称
          <el-input v-model="ruleForm.name" style="width: 100%" size="large" placeholder="请输入您的昵称" clearable />
        </span>
        <span>年龄
          <el-input-number v-model="ruleForm.age" :min="1" :max="100" controls-position="right" size="large"
            width="100%" />
        </span>
        <span>性别
          <el-radio-group v-model="ruleForm.gender" size="large">
            <el-radio-button label="男" :value="1" />
            <el-radio-button label="女" :value="0" style="margin-left: 10px" />
          </el-radio-group>
        </span>
      </div>
      <div class="userInfo">
        <span>学历
          <el-select v-model="ruleForm.education" clearable placeholder="请选择您的学历" style="width: 100%" size="large">
            <el-option label="研究生" value="研究生" />
            <el-option label="本科" value="本科" />
            <el-option label="专科" value="专科" />
          </el-select>
        </span>
        <span>院校
          <el-autocomplete v-model="ruleForm.school" :fetch-suggestions="querySearch" clearable
            class="inline-input w-50" placeholder="请选择您的院校" size="large" style="margin: 5px" />
        </span>
        <span>专业
          <el-autocomplete v-model="ruleForm.major" :fetch-suggestions="querySearchForMajor" clearable
            class="inline-input w-50" placeholder="请选择您的专业" size="large" style="margin: 5px" />
        </span>
      </div>
      <div class="userInfo">
        <span>在读状态
          <el-select v-model="ruleForm.studyStatus" clearable placeholder="请选择您的学历程度" style="width: 100%" size="large">
            <el-option label="在校生" :value="0" />
            <el-option label="应届毕业生" :value="1" />
            <el-option label="已毕业" :value="2" />
          </el-select>
        </span>
        <span>联系电话
          <el-input v-model="ruleForm.phone" style="width: 100%" size="large" placeholder="请输入您的联系电话" clearable />
        </span>
        <span>邮箱
          <el-input v-model="ruleForm.email" style="width: 100%" size="large" placeholder="请输入您的邮箱" clearable />
        </span>
      </div>
      <div style="display: flex; flex-direction: column; align-items: flex-end">
        <el-button style="width: 100px; padding: 20px" @click="exitEditingUserInfo">退出</el-button>
        <el-button style="width: 100px; padding: 20px; margin-top: 5px" type="primary"
          @click="modUserInfo">保存</el-button>
      </div>
    </div>

    <!-- 内容部分 -->
    <div class="content">
      <div>
        <div class="analysis">
          <VueMarkdown :source="analysisContent"></VueMarkdown>
        </div>
        <div style="margin-top: 3vh;">
          <div style="text-align: center;color: #fff;">简历关键词</div>
          <div class="wordclound" id="wordCloudChart"></div>
        </div>
      </div>

      <!-- <div class="content-div"> -->
      <div class="div-opacity" style="width: calc(100% - 28vw)">
        <el-tabs v-model="userStore.activeName" class="demo-tabs" @tab-click="handleClick" style="width: 72vw">
          <el-tab-pane label="在线简历" name="one" class="lable">
            <onlineResume />
          </el-tab-pane>

          <el-tab-pane label="附件简历" name="two">
            <attachmentResume />
          </el-tab-pane>

          <el-tab-pane label="求职进度" name="three">
            <jobSearchProgress />
          </el-tab-pane>

          <el-tab-pane label="职位收藏" name="four">
            <jobCollections />
          </el-tab-pane>

          <el-tab-pane label="职位邀请与投递" name="six">
            <jobInvitation />
          </el-tab-pane>

          <el-tab-pane label="职位浏览记录" name="five">
            <historicalRecords />
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import SvgIcon from "@/components/SvgIcon.vue";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";
import { UploadFilled } from "@element-plus/icons-vue";
import onlineResume from "./components/onlineResume.vue";
import attachmentResume from "./components/attachmentResume.vue";
import jobCollections from "./components/jobCollections.vue";
import jobSearchProgress from "./components/jobSearchProgress.vue";
import jobInvitation from "./components/jobInvitation.vue";
import historicalRecords from "./components/historicalRecords.vue";
import { useUserInfor } from "@/stores/userInfo";
import { updateEmployInfo, getGeneratePortrait } from "@/api/userInformation";
import VueMarkdown from "vue-markdown-render";
import { bus } from "@/utils/mitt";
import * as echarts from "echarts";
import "echarts-wordcloud";
import "echarts-gl";
import { generateByResume } from "@/api/visualizationData";

const userStore = useUserInfor();

onMounted(() => {
  queryGeneratePortrait();
  ruleForm.name = userStore.userInfo.name;
  ruleForm.email = userStore.userInfo.email;
  ruleForm.avatar = userStore.userInfo.avatar;
  ruleForm.gender = userStore.userInfo.gender;
  ruleForm.phone = userStore.userInfo.phone;
  ruleForm.age = userStore.userInfo.age;
  ruleForm.studyStatus = userStore.userInfo.studyStatus;
  ruleForm.desiredPosition = userStore.userInfo.desiredPosition;
  ruleForm.jobRegion = userStore.userInfo.jobRegion;
  ruleForm.education = userStore.userInfo.education;
  ruleForm.school = userStore.userInfo.school;
  ruleForm.major = userStore.userInfo.major;
  ruleForm.minSalary = userStore.userInfo.minSalary;
  ruleForm.maxSalary = userStore.userInfo.maxSalary;
  console.log(ruleForm.studyStatus);
  console.log(userStore.userInfo);
  console.log(userStore.userInfo.studyStatus);
});

//个人信息
interface RuleForm {
  name: string;
  email: string;
  avatar: string;
  gender: number;
  phone: string;
  age: number;
  studyStatus: number;
  desiredPosition: string;
  jobRegion: string;
  education: string;
  school: string;
  major: string;
  minSalary: string;
  maxSalary: string;
}

const ruleForm = reactive<RuleForm>({
  name: "",
  email: "",
  avatar: "",
  gender: 0,
  phone: "",
  age: 0,
  studyStatus: 0,
  desiredPosition: "",
  jobRegion: "",
  education: "",
  school: "",
  major: "",
  minSalary: "",
  maxSalary: "",
});

//获取地区信息
userStore.getProvinceList();

const jobRegion = ref([]);
//开启多选
const props = { multiple: true };

const options = userStore.provinceList.map((provinceItem) => ({
  value: provinceItem.province,
  label: provinceItem.province,
  children: provinceItem.city.map((cityItem) => ({
    value: cityItem,
    label: cityItem,
  })),
}));
const handleChange = (values) => {
  if (values.length > 3) {
    jobRegion.value = values.slice(0, 3);
    // 可以在这里添加一些用户提示，告知用户只能选择三个
    ElMessage.warning("最多只能选择三个地区");
  }
  console.log(jobRegion.value);

  ruleForm.jobRegion = "";
  for (let i = 0; i < jobRegion.value.length; i++) {
    ruleForm.jobRegion += jobRegion.value[i][1];
    if (i < jobRegion.value.length - 1) {
      ruleForm.jobRegion += ","; // 添加逗号分隔符
    }
  }
};

//控制个人信息的编辑与展示
const isModUserInfo = ref(true);
//改变个人信息的展示与编辑
const modInfo = () => {
  isModUserInfo.value = false;
};
//退出编辑
const exitEditingUserInfo = () => {
  isModUserInfo.value = true;
};
//更新个人信息
const modUserInfo = async () => {
  // userStore.updateEmployInfo(ruleForm);
  console.log(ruleForm);

  const res = await updateEmployInfo(ruleForm);
  // console.log(ruleForm.value);
  
  if (res.code === 200) {
    ElMessage({
      message: "更新成功",
      type: "success",
    });
    userStore.queryUserInfo();
    isModUserInfo.value = true;
  } else {
    ElMessage({
      message: "更新失败",
      type: "error",
    });
    isModUserInfo.value = true;
  }
};

//自动补全学校名称
interface RestaurantItem {
  value: string;
}
userStore.getSchoolList(""); // 获取学校列表

// 假设 userStore 中有 schoolList，且 schoolList 是字符串数组
// 将字符串数组转换为符合 RestaurantItem 接口的数组
const restaurants = ref<RestaurantItem[]>(
  userStore.schoolList.map((school) => ({ value: school }))
);

const querySearch = (
  queryString: string,
  cb: (results: RestaurantItem[]) => void
) => {
  if (!restaurants.value) {
    // 如果 restaurants.value 是 undefined，返回空数组
    cb([]);
    return;
  }
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value;

  // 调用回调函数返回建议列表
  cb(results);
};

const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};
//自动补全专业名称
interface RestaurantItem {
  value: string;
}
userStore.getMajorList(""); // 获取学校列表

// 假设 userStore 中有 schoolList，且 schoolList 是字符串数组
// 将字符串数组转换为符合 RestaurantItem 接口的数组
const majorRestaurants = ref<RestaurantItem[]>(
  userStore.majorList.map((major) => ({ value: major }))
);
const querySearchForMajor = (
  queryString: string,
  cb: (results: RestaurantItem[]) => void
) => {
  if (!majorRestaurants.value) {
    // 如果 restaurants.value 是 undefined，返回空数组
    cb([]);
    return;
  }
  const results = queryString
    ? majorRestaurants.value.filter(createMajorFilter(queryString))
    : majorRestaurants.value;

  // 调用回调函数返回建议列表
  cb(results);
};

const createMajorFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};

//自动补全职位名称
interface RestaurantItem {
  value: string;
}
userStore.getJobNamesList(); // 获取学校列表

// 假设 userStore 中有 schoolList，且 schoolList 是字符串数组
// 将字符串数组转换为符合 RestaurantItem 接口的数组
const JobRestaurants = ref<RestaurantItem[]>(
  userStore.jobList.map((job) => ({ value: job }))
);

const querySearchForJob = (
  queryString: string,
  cb: (results: RestaurantItem[]) => void
) => {
  if (!JobRestaurants.value) {
    // 如果 JobRestaurants.value 是 undefined，返回空数组
    cb([]);
    return;
  }
  const results = queryString
    ? JobRestaurants.value.filter(createJobFilter(queryString))
    : JobRestaurants.value;

  // 调用回调函数返回建议列表
  cb(results);
};

const createJobFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};

// 头像部分
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  ruleForm.avatar = response.data;
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

//内容标签页部分
import type { TabsPaneContext } from "element-plus";

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

//生成用户画像
const analysisContent = ref("正在加载中...");
const queryGeneratePortrait = async () => {
  const res = await getGeneratePortrait();
  console.log(res);

  if (res.code === 200) {
    analysisContent.value = res.data;
    console.log(analysisContent.value);
  } else {
    ElMessage({
      message: "请检查网络问题",
      type: "error",
    });
  }
};

//词云
const wordCloudData = ref([]);

var rindex = () => parseInt(Math.random() * 100) % 7;
var mycolor = () =>
  ["#B0C4DE", "#D2B48C", "#FFB6C1", "#FFDAB9", "#E0FFFF", "#FFA07A", "#ADD8E6"][
  rindex()
  ];
var backgroundColor = () => mycolor().replace(/([0-9a-fA-F]{2})/g, "$1, 0.4)");

onMounted(() => {
  let myChart: any = null;
  const chartDom = document.getElementById("wordCloudChart");

  const getlineChartData = async () => {
    const res = await generateByResume();
    if (res.code === 200) {
      wordCloudData.value = res.data.wordCloud;

      // 确保 myChart 已经初始化
      if (myChart) {
        myChart.setOption({
          tooltip: {
            trigger: 'item', // 数据项触发
            position: 'right', // 提示框显示在鼠标右侧
            formatter: function (params) {
              // 自定义提示框内容
              return `
                <div style="font-size: 14px; color: #333; background-color: #f5f5f5; padding: 10px; border-radius: 5px;">
                  <strong>${params.name}</strong><br/>
                </div>
              `;
            }
          },
          series: [
            {
              layout: "force",
              force: {
                repulsion: 80, // 增大节点之间的排斥力
                edgeLength: 15, // 增大边的长度
              },
              type: "graph",
              data: wordCloudData.value.map((node) => {
                let color = mycolor();
                let bgcolor = backgroundColor();
                let zValue = Math.random() * 100;
                // 根据文字长度动态调整气泡大小
                let baseSize = 60; // 增大基础大小
                let sizePerChar = 4; // 增大每个字符增加的大小
                let symbolSize = baseSize + node.name.length * sizePerChar;

                return {
                  id: node.name,
                  name: node.name,
                  symbolSize: symbolSize, // 动态调整气泡大小
                  itemStyle: {
                    color: color, // 气泡背景颜色
                    borderColor: bgcolor, // 边框颜色
                    borderWidth: node.value / 8, // 减小边框宽度
                  },
                  label: {
                    show: true,
                    overflow: "truncate", // 文字溢出时截断
                    width: symbolSize, // 设置文字宽度为气泡大小
                    height: symbolSize, // 设置文字高度为气泡大小
                    fontSize: symbolSize / 4, // 增大字体大小
                    formatter: function (params) {
                      return params.name; // 显示完整的文字
                    },
                    color: "#555", // 调整标签字体颜色
                  },
                  symbolSize: node.value * 40, // 增大气泡大小
                  z: zValue,
                };
              }),
              zoom: 1,
              center: ["50%", "50%"],
              roam: true,
              edgeSymbol: ["circle", "arrow"],
              edgeSymbolSize: [4, 10], // 增大边的符号大小
              lineStyle: {
                color: '#ccc', // 设置边的颜色
                width: 1, // 设置边的宽度
                type: 'solid' // 设置边的类型为实线
              }
            },
          ],
        });
      }
    }
  };

  if (chartDom) {
    myChart = echarts.init(chartDom);
    getlineChartData();
  }
});
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;

  // background-image: url(../assets/img/backgroundImage.png);
  //  background-position: center;
  // background-repeat: no-repeat;
}

.swiper {
  height: 100%;
  min-height: 106vh;
}

// 链接部分
.link-frist {
  width: 100%;
}

.el-link {
  margin-right: 8px;
  margin-left: 10px;
  color: white;
}

.link,
.frist_img {
  display: flex;
  float: left;
  margin: 20px;
}

.link {
  transform: translateX(-30px);
}

.info {
  font-size: 20px;
  display: flex;
  float: left;
}

.frist_img img {
  width: 30px;
  height: 30px;
}

// 用户信息部分
.user-info {
  width: 100%;
  height: 250px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  //用户头像
  .userAvatar {
    width: 150px;
    height: 150px;
    background-color: #fff;
    border-radius: 50%;
    margin-left: 105px;

    .avatar-uploader {
      width: 100%;
      height: 100%;
    }

    .avatar-uploader .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }

  //用户信息
  .userInfo {
    margin-left: 50px;
    width: 200px;
    height: 80%;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 18px;
    justify-content: space-between;
  }

  .userInfo-show {
    margin-left: 20px;
    width: 250px;
    height: 40%;
    height: 40%;
    color: #fff;
    display: flex;
    flex-direction: column;
    font-size: 18px;
    justify-content: space-between;
  }
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

// 内容部分
// 标签页部分
.content {
  width: 100%;
  height: 100%;
  display: flex;
}

.content-div {
  margin-left: 5vw;
}

.analysis {
  padding: 10px;
  border-radius: 10px;
  width: 250px;
  // height: 200px;
  margin-top: 50px;
  margin-left: 10px;
  // background-color: #fff;
  color: var(--title-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* 添加过渡效果 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* 初始阴影效果 */
  background-color: var(--button-color);
  max-height: 500px;
  /* 或者你希望的最大高度 */
  overflow-y: auto;
}

.analysis:hover {
  transform: translateY(5px) translateX(5px);
  /* 鼠标移动时向上浮动 */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* 鼠标移动时增强阴影效果 */
}

.wordclound {
  width: 100%;
  height: 30vh;
  border-radius: 10px;
}

.div-opacity {
  // position: absolute;
  margin-left: 2vw;
  z-index: 10;
}

:deep(.el-tabs__item) {
  color: rgb(255, 255, 255);
}

:deep(.el-tabs__item.is-active) {
  // color: rgb(19 94 196);
  color: #f8daa8;

  font-weight: bold;
}

:deep(.el-tabs__item:hover) {
  // color: blue;
  color: #f8daa8;
}

//附件简历部分
.el-upload__text .text-div {
  width: 100%;
  height: 20px;
  color: rgb(0, 0, 0);
}

:deep(.el-upload) {
  width: 100%;
  height: 100%;
  --el-upload-dragger-padding-horizontal: 40px;
  --el-upload-dragger-padding-vertical: 10px;
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  outline: none;
}

:deep(.el-row) {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
}

:deep(.el-date-editor) {
  --el-date-editor-width: 220px;
  --el-date-editor-monthrange-width: 300px;
  /* --el-date-editor-daterange-width: 350px; */
  --el-date-editor-datetimerange-width: 400px;
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 1px transparent inset;
  --el-input-border-color: var(--el-border-color);
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: var(--el-fill-color-blank);
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: var(--el-border-color-hover);
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: var(--el-color-primary);
  --el-input-width: 100%;
  position: relative;
  text-align: left;
  vertical-align: middle;
}

:deep(.el-radio-button--large .el-radio-button__inner) {
  border-radius: 0;
  font-size: var(--el-font-size-base);
  padding: 12px 39px;
}

:deep(.el-tabs__header) {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
  padding: 0;
  position: relative;
}

//垂直对齐
.alignment {
  display: flex;
  align-items: center;
}

.info-text {
  white-space: pre-wrap;
}

//右边距
.mr {
  margin-right: 3px;
}

.pr-10 {
  padding-right: 10px;
}

.pl-10 {
  padding-left: 10px;
}

.border-r {
  border-right: 3px solid #fff;
}

//滚动条样式 美化
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101f1c, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  transition: background-color 0.3s;
  cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, 0.3);
}

:deep(.el-tabs__active-bar) {
  background-color: #d69955;
  bottom: 0;
  height: 2px;
  left: 0;
  list-style: none;
  position: absolute;
  transition: width var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier),
    transform var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
  z-index: 1;
}
</style>
